import { Component, Prop } from "vue-property-decorator";
import { VC } from "@/VC-vue";
import { quillEditor } from "vue-quill-editor";
import Upload from "@/components/Upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import styles from "./style.less";
import { createLoading } from "../Loading/createLoading";
import axios from "axios";
const instance = axios.create({
    baseURL:
        process.env.NODE_ENV === "development" ? "/api" : "/ocpadapter-jdry/",
    withCredentials: true,
    timeout: 15000
});

// 工具栏配置
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
    ["blockquote", "code-block"], // 引用  代码块
    [{ header: 1 }, { header: 2 }], // 1、2 级标题
    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
    [{ script: "sub" }, { script: "super" }], // 上标/下标
    [{ indent: "-1" }, { indent: "+1" }], // 缩进
    [{ direction: "rtl" }], // 文本方向
    [{ size: ["small", false, "large", "huge"] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ font: [] }], // 字体种类
    [{ align: [] }], // 对齐方式
    ["clean"], // 清除文本格式
    ["link", "image", "video"] // 链接、图片、视频
];
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.readAsDataURL(img);
    reader.addEventListener("load", () => callback(reader.result));
}

interface EditorProp {
    value?: string;
}

@Component({
    components: { quillEditor }
})
export default class WorkPlace extends VC<EditorProp> {
    @Prop() value!: string;
    $refs!: {
        myQuillEditor: any;
        editorUpload: any;
    };
    content: any = "";

    mounted() {
        this.content = this.value || "";
    }

    editorOption: any = {
        theme: "snow", // or 'bubble'
        placeholder: "您想说点什么？",
        modules: {
            toolbar: {
                container: toolbarOptions,
                handlers: {
                    image: this.imageHandle
                }
            }
        }
    };
    imageHandle(value) {
        if (value) {
            // const upload = document.querySelector('input')
            // upload && upload.click()
            this.$refs.editorUpload.click();
        }
    }
    onEditorChange() {
        this.$emit("update:value", this.content);
    }
    fileChange(e) {
        const files = this.$refs.editorUpload.files;
        const loading = createLoading({ loadingText: "正在上传..." });
        const quill = this.$refs.myQuillEditor.quill;
        let params = new FormData(); // 创建form对象
        params.append("file", files[0], files[0].name); // 通过append向form对象添加数据
        instance
            .post("/uploadImg", params, {
                headers: {
                    "Content-Type": "multiple/form-data"
                }
            })
            .then(res => {
                let length = quill.getSelection().index;
                // 插入图片  res.url为服务器返回的图片地址
                quill.insertEmbed(length, "image", res.data.uploadUrl);
                // 调整光标到最后
                quill.setSelection(length + 1);
                // 清空上传文件的缓存，防止不触发第二次change事件
                this.$refs.editorUpload.value = null;
                loading.close();
            });
        // // 单文件上传
        // getBase64(files[0], imageUrl => {
        //     setTimeout(() => {
        //         let length = quill.getSelection().index
        //         // 插入图片  res.url为服务器返回的图片地址
        //         quill.insertEmbed(length, 'image', imageUrl)
        //         // 调整光标到最后
        //         quill.setSelection(length + 1)
        //         // 清空上传文件的缓存，防止不触发第二次change事件
        //         this.$refs.editorUpload.value = null
        //         loading.close()
        //     }, 1000)
        // })
    }
    protected render() {
        return (
            <div>
                <quill-editor
                    class={styles.editor}
                    v-model={this.content}
                    ref="myQuillEditor"
                    options={this.editorOption}
                    onchange={this.onEditorChange}
                />
                <input
                    type="file"
                    ref="editorUpload"
                    style="display:none"
                    multiple
                    onchange={this.fileChange}
                />
            </div>
        );
    }
}
